@import 'scss-imports/cssvars';

/* MODAL STYLES
-------------------------------*/

.ix-slide-in2-form {
  bottom: 0;
  min-width: 480px;

  /* enables scrolling for tall modals */
  overflow: auto;
  position: fixed;
  right: -480px;
  top: 48px;
  transition: 200ms;
  width: 480px;

  /* z-index must be higher than .ix-slide-in2-background */
  /* ...but less than 1000 otherwise you cover select */
  z-index: 999;
}

.ix-slide-in2-form.open {
  overflow-x: hidden;
  overflow-y: auto;
  right: 0;
  transition: 200ms;
}

.ix-slide-in2-form.open.wide {
  width: 800px;

  @media(max-width: $breakpoint-sm) {
    width: 100%;
  }
}

:host ::ng-deep .ix-slide-in2-body {
  background: #fff;
  /* margin exposes part of the modal background */
  margin: 40px;
  padding: 0 20px 20px;

  .mat-mdc-card {
    margin: 0;
  }
}

.ix-slide-in2-form .ix-slide-in2-body {
  background-color: var(--bg2);
  margin: 0;
  min-height: 100%;
}

.ix-slide-in2-background {

  /* semi-transparent black  */
  bottom: 0;
  left: 0;
  opacity: 0.75;
  /* modal background fixed across whole screen */
  position: fixed;
  right: 0;
  top: 48px;
  transition: 100ms;

  /* z-index must be below .ix-slide-in and above everything else  */
  z-index: -10;
}

.ix-slide-in2-background.open {
  transition: 200ms;
  z-index: 900;
}

@media #{$media-lt-sm} {
  .ix-slide-in2-form {
    min-width: 100%;
    right: -100%;
    width: 100%;
  }
}

.ix-slide-in2-form.open.not-top,
.not-top {
  pointer-events: none;
}
